<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
    class Increase extends React.Component{
	constructor(props){
        super(props);
        this.state = {iNum:10};
        //可以在组件初始化时绑定this
        this.fnAdd = this.fnAdd.bind(this);
    }
    // setsetState可以传一个对象,也可以是一个函数
    fnAdd(){
        // 使用setState来改变state中的值, prevState指state最新的值
        this.setState(prevState=>({
            iNum:prevState.iNum+1
        }));
    }
    render(){
        return (
            <div>
        	    <p>{this.state.iNum}</p>
    		    <input type='button' onClick={this.fnAdd} value='递增' />
            </div>
            )
            }
}
ReactDOM.render(<Increase/>, document.getElementById('root'))
</script>
</body>
</html>